<template>
    <div class = "menu-component">
      <div class = "menu-title"> {{title}} </div>
      <div class = "content">
        <ul class = "item-container">
          <li v-for="i in menuItems" class = "item">
            <div class = "func">
              <span v-show = "i.func">*</span>
            </div>

            <div class = "content" :class = "$index === selectIndex ? 'selected':''">
              <div class = "key"
               :class = "i.enable === false? 'inactive':''"> {{i.key}}
              </div>

              <div class = "value" v-if = "i.type === 'number'">
                :{{i.value}} {{i.unit}}
              </div>

              <div class = "value" v-if ="i.type === 'text'"
                   :class = "i.enable === false? 'inactive':''">
                :{{i.value}}
              </div>

              <div class = "value" v-if = "i.type === 'zone'">
                :{{i.value}}
              </div>

              <div class = "value" v-if = "i.type === 'date'">
                :{{i.value}}
              </div>

              <div class = "value" v-if = "i.type === 'time'">
                :{{i.value}}
              </div>

              <div class = "value" v-if = "i.type === 'dualNumber'">
                :{{i.value}} {{i.unit}}
              </div>

              <div class = "value" v-if = "i.type === 'range'">
                :{{i.value}}m
              </div>

              <div class = "sub" v-if="i.type === 'sub' || i.type === 'page'"> ▶ </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  export default {
    created () {
      let _this = this
      this.incSelection = function () {
        let length = _this.menuItems.length
        _this.selectIndex++
        if (_this.selectIndex > length - 1) {
          _this.selectIndex = length - 1
        }
        let ret = _this.menuItems[_this.selectIndex]
        while (ret.enable === false) {
          _this.selectIndex++

          ret = _this.menuItems[_this.selectIndex]
          if (_this.selectIndex > length - 1) {
            _this.selectIndex = 0
            break
          }
        }
      }

      this.decSelection = function () {
        _this.selectIndex--
        if (_this.selectIndex < 0) {
          _this.selectIndex = 0
        }

        let ret = _this.menuItems[_this.selectIndex]
        while (ret.enable === false) {
          _this.selectIndex--
          ret = _this.menuItems[_this.selectIndex]
          if (_this.selectIndex < 0) {
            _this.selectIndex = 0
            break
          }
        }
      }
      this.currentItem = function () {
        return _this.menuItems[_this.selectIndex].key
      }
    },
    data () {
      return {
      }
    },
    computed: {
    },
    props: {
      menuItems: {
        type: Array,
        require: true
      },
      selectIndex: {
        type: Number
      },
      title: {
        type: String
      }
    }
  }
</script>

<style lang = "less" scoped>
  .menu-component {
    text-align: left;
    color: black;
  }

  .menu-title {
    text-indent: 10px;
    background-color: dodgerblue;
    color: white;
  }

  .item-container {
    padding-left: 5px;
    margin: 5px 5px;
    list-style: none;
    -webkit-padding-start: 2px;
    margin: 0px;
    white-space: nowrap;

    .item {
    }

    .content {
      display: inline-block;
    }

    .key {
      display: inline-block;
      overflow-x:hidden;
      width: 300px;
    }

    .value {
     display: inline-block;
      width: 100%
    }

    .sub {
      display: inline-block;
    }
  }

  .inactive {
    color: gray;
  }

  .selected {
    background-color: black;
    color: white;
  }

  .index {
    display: inline-block;
  }



  .number {
    display: inline-block;
  }

  .zone {
    display: inline-block;
  }


  .func {
    display: inline-block;
    width: 1px;
  }
</style>
